// 公司热招职位me
import * as React from "react";
import { useParams } from "react-router-dom";
import { useState, useEffect } from "react";

import * as recruitapi from "../../services/recruit.services";
import * as companyapi from "../../services/company.services";
import { IRecruit, ICompany } from "../../types";

import style from "./style.module.css";
import CompanyRecruitItem from "../../components/CompanyRecruitItem";
import CompanyRecruitSearchItem from "../../components/CompanyRecruitSearchItem";
import CompanyNav from "../../components/CompanyNav";

interface Params {
  id: string;
}

export default function CompanyRecruit(props: Params) {
  const [rows, setRows] = useState<IRecruit[]>([]);
  const [information, setInfomation] = useState<ICompany>();
  const [size, setSize] = useState<number>(5);
  const params = useParams<Params>();

  useEffect(() => {
    const getData = async () => {
      let result = await recruitapi.RecruitLi(params.id);
      if (result.stat === "OK") {
        setRows(result.result);
      }
      const information = await companyapi.company(params.id);
      if (information.stat === "OK") {
        setInfomation(information.result);
      }
    };
    getData();
  }, [params.id]);

  return (
    <>
      <CompanyRecruitSearchItem />
      <CompanyNav company={information} number={rows.length} />
      <div>
        {rows?.map((item, index) => {
          if (index < size) {
            return <CompanyRecruitItem rows={item} key={item._id} />;
          } else {
            return null;
          }
        })}
      </div>
      <div className={style.loadmore} onClick={() => setSize(size + 5)}>
        {size >= rows.length ? "没有更多了" : "加载更多"}
      </div>
    </>
  );
}
